<script setup>
import { ref,reactive,defineProps,onMounted,defineEmits 
 } from 'vue';
// 引入lodash
import _ from 'lodash';
// 引入按钮
import button_img from '../assets/button.png';
const emit = defineEmits(['resultData']);

// 获取父组件参数
const props = defineProps({
    width: {
    type: String,
    default: "300",
  },
    height: {
    type: String,
    default: "300",
  },
  data: {
    type: Array,
    default: [{ title: '', probability: 5 },
  { title: '', probability: 15 },
  { title: '', probability: 30 },
  { title: '', probability: 50 },
  { title: '', probability: 5 },
  { title: '', probability: 25 },
  { title: '', probability: 34 },
  { title: 'Thank You', probability: 40 },
  { title: '', probability: 40 },
],
  },
});
// 九宫格
// 盒子尺寸
const boxSize = reactive({
    width:props.width||'100',
    height:props.height||'100',
});
console.log(boxSize);
onMounted(()=>{
    boxSize.width = props.width;
    boxSize.height = props.height;
    data.value = props.data;
})
// 九宫格数据
const data = ref([  
    { title: 'Gold Medal', probability: 5 },
  { title: 'Silver Medal', probability: 15 },
  { title: 'Bronze Medal', probability: 30 },
  { title: 'Thank You', probability: 50 },
  { title: 'Gold Medal', probability: 5 },
  { title: 'Silver Medal', probability: 25 },
  { title: 'Bronze Medal', probability: 34 },
  { title: 'Thank You', probability: 40 },
  { title: 'Thank You', probability: 40 },
]);
// 九宫格按钮事件
const activeIndex = ref(0);
let time = 300;
let quan = 0;
let timer = null;
let random = null;
let index_one = 0;
// 抽中数据
let matchData = reactive({});
let bealoon = false;
function buttonClick(){
    // random = random||Math.ceil(Math.random()*10);
   let  matchData_one = drawPrize(data.value);
   console.log(matchData_one);
    data.value .forEach((item,index)=>{
    if(_.isEqual(item,matchData_one)){
            console.log(index);
            
           index_one = index;
            
        }
    })
    console.log(index_one);
    if(timer){
        console.log('timer');
        clearInterval(timer);
        // time = 300;
        // quan = 0;
        // activeIndex.value = 0;
    }
    timer = setInterval(()=>{
        console.log(time,quan,index_one,activeIndex.value);
        if(activeIndex.value==data.value.length-1){
        activeIndex.value = 0;
        quan ++;
    }else{
            activeIndex.value++
    }
    if(quan<2){
   
    if(quan>=1&&time>10){
           time= time*.5;
    }
    if(time<10){
        time= 10;
    }
    }
    if(quan=>2&&quan<3){
        time= time*1.5;
    }
    if(quan==3&&index_one==activeIndex.value){
    console.log('96');
        clearInterval(timer);
        time = 300;
        quan = 0;
        matchData.value = matchData_one;
        emit('resultData',matchData_one);
        // activeIndex.value = 0;
        random = null;
    }
    console.log(quan);
    },time)
}
// 抽奖方法
function drawPrize(prizes) {
  // prizes 是一个数组，格式如 [{ name: 'A', weight: 1 }, { name: 'B', weight: 3 }]
  const totalWeight = prizes.reduce((sum, prize) => sum + prize.probability, 0);
  const random = Math.random() * totalWeight;
  let accumulatedWeight = 0;
  for (const prize of prizes) {
    accumulatedWeight += prize.probability;
    if (random <= accumulatedWeight) {
      return prize;
    }
  }
}
</script>
<template>
    <div class="page">

    
        <div :style="{width: props.width+'px',height: props.height+'px',backgroundColor:'#1551C1',}" class="box">
            <div v-for="(item,index) in data" :key="index" :style="{width: (boxSize.width/3)-(boxSize.width/15)+'px',height: (boxSize.height/3)-(boxSize.height/15)+'px',}" :class="['box-item', `box-item${index}`,index==activeIndex?'item-active':'']">
                <div  class="center box-item-top">
                    <img :src="item.img" alt="">
                </div>
                <div  class="center box-item-bottom">
                    <p>{{item?.title}}</p>
                </div>
            </div>
            <button @click="buttonClick" :disabled="data.length!=8||timer!=null" :style="{width: (boxSize.width/3)-(boxSize.width/15)+'px',height: (boxSize.height/3)-(boxSize.height/15)+'px',}" class="comic-button">Click me!</button>
        </div>
        <!-- 提示框 -->
    <transition name="fade" @after-enter="afterEnter" @after-leave="afterLeave">
      <div v-if="data.length!=8" class="alert-box">
        <p>数据长度必须为八</p>
      
      </div>
    </transition>
</div>
</template>
<style scoped>
.page{
    width: 100%;
    height: 100%;
    position: relative;
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.jiugongge {
    width: 100%;
    height: 100%;
}
.box{
    border-radius: 10px;
    border: 1px solid #000;
    /* display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center; */
    position: relative;
}
.box-item{
    border-radius: 5px;
    width: 25%;
    background-color: #fff;
    position: absolute;
}
.box>div:nth-of-type(5){
    background-color: #1551C1;
}
.box-item-top{
    width: 100%;
    height: 60%;
    background-color: #002976;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
}
.box-item-top img{
    width: 70%;
    height: auto;
    object-fit: contain; /* 保持图片宽高比，适应容器 */
}
.box-item-bottom{
    width: 100%;
    height: 40%;
    flex-wrap: wrap;
    background-image: linear-gradient(-120deg, #006BFF 0%, #17A0FF 100%);
    border-radius: 0 0 5px 5px;
    flex-direction: column;
} 
.box-item-bottom span{
    font-weight: 550;
    color: #fff;
    line-height: 1em;
    white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.box-item-bottom p{
    width: 80%;
    color: #fff;
    font-size: 0.9em;
    line-height: 1em;
    white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
}
/* 按钮样式 */
.comic-button {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #ff5252;
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #0000004e;
  transition: all 0.3s ease;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.comic-button:hover {
  background-color: #fff;
  color: #ff5252;
  border: 2px solid #ff5252;
  box-shadow: 5px 5px 0px #ff5252;
}

.comic-button:active {
  background-color: #fcf414;
  box-shadow: none;
  transform: translateY(4px);
  transform: translate(-50%,-50%);
}
/* 抽中组件的样式 */
.item-active{
   box-shadow: 0 0 7px 3px #23ADB2;
}
.box-item0{
    left:4% ;
    top: 4%;
}
.box-item1{
    top: 4%;
    left:37% ;
}
.box-item2{
    top: 4%;
    left:70% ;
}
.box-item3{
    top: 37%;
    left:70% ;
}
.box-item4{
    top: 70%;
    left:70% ;
}
.box-item5{
    top: 70%;
    left:37% ;
}
.box-item6{
    top: 70%;
    left:4% ;
}
.box-item7{
    top: 37%;
    left:4% ;
}
/* 提示 */
/* 提示框样式 */
.alert-box {
  background-color: #ffcccb;
  color: #333;
  border: 1px solid #f5c2c7;
  padding: 15px;
  border-radius: 5px;
  width: 50%;
  margin: 20px auto;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>